import React from 'react';
import {Modal, Form, Input,InputNumber} from 'antd';
import {connect} from 'dva';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 4},
  wrapperCol: {span: 13},
};

class EditCustomerTypeModalUI extends React.Component {

  handleOk = () => {
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'customerType/e_update',
          payload: values
        });
        this.props.form.resetFields();
        this.props.showOrHiddenModalVisible(false);
      }
    });
  };
  handleCancel = () => {
    this.props.form.resetFields();
    this.props.showOrHiddenModalVisible(false);
  };

  render() {
    return (
      <Modal title="编辑会员类型" visible={true} onOk={() => {
        this.handleOk()
      }} width={620}
             onCancel={() => {
               this.handleCancel()
             }} okText="确认" cancelText="取消" maskClosable={false}
      >
        <Form>
          {
            this.props.form.getFieldDecorator('id', {
              initialValue: this.props.editRow.id,
              rules: [
                {
                  required: true,
                },
              ],
            })(<Input type="hidden"/>)
          }
          <FormItem {...formItemLayout} label="类型名称" >
            {
              this.props.form.getFieldDecorator('name', {
                initialValue: this.props.editRow.name,
                rules: [
                  {
                    message:"折扣名称不能为空",
                    required: true,
                  },
                ],
              })(<Input placeholder="类型名称" size="large" />)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="折扣" >
            {
              this.props.form.getFieldDecorator('discount', {
                initialValue: this.props.editRow.discount,
                rules: [
                  {
                    required: true,
                    message:"折扣范围[0.01-1.00]",
                    type: "number",
                    min:0.01,
                    max:1.00,
                  },],
              })(<InputNumber  placeholder="7折(0.7) 或者 75折(0.75)" style={{width:'321px'}} size="large" precision={2} step={0.01}/>)
            }
          </FormItem>
        </Form>
      </Modal>

    );
  }
}

export default connect()(Form.create()(EditCustomerTypeModalUI));
